<template>
  <div class="report-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.patientName"
        :label="`检查时间：${item.checkTime}`"
        is-link
        @click="goToDetail(item.id)"
      >
        <template #value>
          <span :class="['status', item.status]">{{ item.statusText }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

const onLoad = async () => {
  try {
    loading.value = true
    // 这里替换成实际的 API 调用
    const res = await fetch(`/api/doctor/reports?page=${page.value}`)
    const data = await res.json()
    
    list.value.push(...data.items)
    page.value++
    
    if (data.items.length < 20) { // 假设每页20条
      finished.value = true
    }
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push(`/doctor/detail/${id}`)
}
</script>

<style scoped>
.status {
  font-size: 14px;
}
.status.pending {
  color: #ff976a;
}
.status.completed {
  color: #07c160;
}
</style> 